<template>
  <div class="card-face card-face-3" :class="[swipeAnimation, enterAnimation]">
    <div class="explanation-container">
      <h3>单词说明</h3>
      <div class="word-explanation">
        <p>{{ word.explanation || '暂无详细说明' }}</p>
      </div>
      <div class="word-tags" v-if="word.tags && word.tags.length">
        <span class="tag" v-for="(tag, index) in word.tags" :key="index">{{ tag }}</span>
      </div>
      <div class="word-notes mt-3">
        <h4>学习笔记</h4>
        <textarea class="form-control" v-model="notes" placeholder="添加你的学习笔记..." @click.stop rows="4"></textarea>
        <button class="btn btn-sm btn-primary mt-2" @click.stop="saveNotes">保存笔记</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardFaceExplanation',
  props: {
    word: {
      type: Object,
      required: true
    },
    swipeAnimation: {
      type: String,
      default: ''
    },
    enterAnimation: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      notes: ''
    }
  },
  watch: {
    'word.text': {
      immediate: true,
      handler(newVal) {
        if (newVal) this.loadNotes();
      }
    }
  },
  methods: {
    saveNotes() {
      if (!this.word.text) return;
      localStorage.setItem(`word-notes-${this.word.text}`, this.notes);
      this.$emit('notes-saved');
    },
    loadNotes() {
      if (!this.word.text) return;
      const savedNotes = localStorage.getItem(`word-notes-${this.word.text}`);
      if (savedNotes) {
        this.notes = savedNotes;
      } else {
        this.notes = '';
      }
    }
  }
}
</script>